<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=3,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>订单</title>
    <link href="../css/reset-html5.css" rel="stylesheet">
    <link href="../css/mui.min.css" rel="stylesheet">
    <link href="../css/mui.picker.min.css" rel="stylesheet">
    <link href="../css/wx-main.css?20161105_1" rel="stylesheet">
    <script src="../js/jquery-2.2.1.min.js"></script>
    <script src="../plugins/vue/vue.min.js"></script>
    <style>
        body{
            font-size: 14px;
        }
        #btn{
            margin-top: 15px;
            margin-bottom: 15px;
            color: #ffffff;
            text-align: center;
            padding: 10px 0;
            border-radius: 10px;
            width: 90%;
            margin-left: 5%;
        }
        select{
            padding: 5px!important;
            width: 100%!important;
        }
    </style>
</head>
<body class="body-bg" id="main">
<header class="text-color1">
        <span class="left-btn text-color2" onclick="history.go(-1)">
            返回
        </span>
    订单结算
</header>

    <div class="white-bg mar-hor mar-top pad radius box-shadow">
        <p class="text-center primary-text" v-text="init_data_order.phone_name">

        </p>
        <p class="text-center text-color2 mar-top font-size12" v-text="init_data_order.color+'，'+init_data_order.version">

        </p>
        <div class="mar-top">
            <div class="border-1 pad8 text-center text-color2 mar-btm" v-for="list in init_data_order.data.fault_info">
                <span v-text="list.name"></span><span class="primary-text" v-text="'('+list.price+'元)'"></span>
            </div>

            <div class="cut-off-line-1" style="height: 1px;"></div>

            <div class="text-color1 pad-top15" style="font-size: 16px">
                订单费用预估：<span class="primary-text" v-text="init_data_order.price+'元'"></span>
            </div>
        </div>
    </div>

    <div class="mar-hor mar-top text-color2" id="edit">
        <div class="left">
            维修方式：
        </div>
        <div class="right" id="select">
            <span class="btn active" name="1">上门维修</span>
            <span class="btn" name="2">到店维修</span>
        </div>


        <div id="zt1">
            <div class="row_t">
                <div class="left">
                    姓名：
                </div>
                <div class="right">
                    <input type="text" class="input-text" id="uname">
                </div>
            </div>

            <div class="row_t mar-top">
                <div class="left">
                    手机号码：
                </div>
                <div class="right">
                    <input type="tel" class="input-text" id="phone">
                </div>
            </div>
            <div class="row_t text-color3 mar-top mar mui-text-right" style="font-size: 12px;padding-right: 12%">
                <!--首次下单需验证手机请-->
                <a href="javascript:void (0)" class="primary-text" v-on:click="alert_phone()" id="alert_phone" v-show="init_data_order.history.is_history==1">修改手机号</a>
                <a href="javascript:void (0)" class="primary-text" v-on:click="sendMessage()" id="sms" v-show="init_data_order.history.is_history!=1">获取验证密码</a>
            </div>
            <div class="row_t mar-top" v-show="init_data_order.history.is_history!=1">
                <div class="left">
                    验证码：
                </div>
                <div class="right">
                    <input type="tel" class="input-text" id="code">
                </div>
            </div>

            <!--上门-->
            <div id="type-1-1">
                <div class="row_t mar-top">
                    <div class="left">
                        上门时间：
                    </div>
                    <div class="right">
                        <input class="input-text date" id="subscribe_time" readonly data-options="{&quot;value&quot;:&quot;2016-10-29 10:00&quot;,&quot;beginYear&quot;:2016,&quot;endYear&quot;:2016,&quot;beginMonth&quot;:10,&quot;beginDay&quot;:29}">
                    </div>
                </div>
            </div>
            <!--上门end-->

            <div class="row_t mar-top">
                <div class="left">
                    您的地区：
                </div>
                <div class="right">
                    <select class="input-text" id="area_id" v-model="areaId" @change="shop()">
                        <option v-for="list in area" v-text="list.name" v-bind:value="list.id"></option>
                    </select>
                </div>
            </div>


            <div id="type-2" style="display: none" class="mar-top">
                <div class="left">
                    选择门店：
                </div>
                <div class="right">
                    <select class="input-text" id="admin_id" v-model="admin_id" @change="getShopInfo(admin_id)">
                        <option v-for="list in shop_list" v-text="list.name" v-bind:value="list.admin_id"></option>
                    </select>
                </div>

                <div v-show = "shopInfo.address_info">
                    <div style="height: 10px;"></div>
                    <div class="left">
                        门店地址：
                    </div>
                    <div class="right">
                        {{shopInfo.address_info}}
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="left">
                        营业时间：
                    </div>
                    <div class="right">
                        {{shopInfo.time}}
                    </div>
                </div>

            </div>


            <!--上门-->
            <div id="type-1">
                <div class="row_t mar-top">
                    <div class="left">
                        详细地址：
                    </div>
                    <div class="right">
                        <input type="text" class="input-text" id="address_info">
                    </div>
                </div>
            </div>
            <!--上门end-->


            <div class="row_t mar-top">
                <div class="left">
                    备注：
                </div>
                <div class="right">
                    <input type="text" class="input-text" placeholder="选填" id="message">
                </div>
            </div>
        </div>


        <div class="primary-bg text-color2" id="btn" onclick="do_order()">下一步</div>
    </div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.picker.min.js"></script>
<script src="../js/base.js"></script>
<script>

    var order_id;
    var SMS = false;
    var is_phone=10086;
    var area_id = 3;
    var type = 1;
    var shop_info;//店面信息

    function show_data_init(){
        var order_data = JSON.parse(localStorage.weixin_order_one);

        if(order_data.history.is_history==1){
            is_phone = order_data.history.info.phone;
            $('#phone').val(is_phone).prop('disabled',true).addClass('input_disabled');
        }else{

        }
        $('#uname').val(order_data.history.info.uname);
        order_id = order_data.order_id;
        return order_data;
    }


    var vue = new Vue({
        el:'#main',
        data:{
            init_data_order:'',
            area:'',
            areaId:'3',
            shop_list:'',
            shopInfo:{},
            admin_id:''
        },
        methods:{
            'show_data_init':function(){
                this.init_data_order = show_data_init();
                var that = this;
                $.post('../index/index.php?m=Home&c=Index&a=getOrderAddress',{},function(res){
                    if(res.code==200){
                        that.area = res.data
                    }else{
                        alert(res.message);
                    }
                },'json');
            },
            'sendMessage':function(){
                var phone = $('#phone').val();
                if(is_phone == phone){
                    alert('手机号并未修改，无需短信验证');
                    this.init_data_order.history.is_history = 1;
                    return false;
                }
                if(!SMS){
                    SMS = true;
                    $.post('../index/index.php?m=Home&c=Index&a=getPhoneCode',{phone:phone},function(res){
                        if(res.code==200){
                            $('#sms').text('验证码已发送，请留意短信');
                            SMS = true;
                            alert('短信发送成功！')
                        }else{
                            SMS = false;
                            alert(res.message);
                        }
                    },'json');
                }else{
                    alert('短信已发送，请等候');
                }
            },
            //选择门店
            'select_shop':function(){
                var that = this;
                var id = this.areaId;
                $.post('../index/index.php?m=Home&c=Index&a=getAreaShop',{area_id:id},function(res){
                    if(res.code==200){
                        that.shopInfo = {};
                        shop_info = res.data;
                        that.shop_list = res.data
                    }else if(res.code==201){
                        that.shop_list = {};
                        that.shopInfo = {};
                        that.admin_id = ''
                    } else{
                        alert(res.message);
                    }
                },'json');
            },
            //地区选择门店
            'shop':function(){
                this.select_shop();
            },
            //修改手机号
            'alert_phone':function(){
                $('#phone').val('').prop('disabled',false).removeClass('input_disabled');
                this.init_data_order.history.is_history = 0;
            },
            'getShopInfo':function(admin_id){
                var shop_info_ = {};
                for(var i in shop_info){
                    if(shop_info[i].admin_id == admin_id){
                        shop_info_.address_info = shop_info[i].address_info;
                        shop_info_.time = shop_info[i].starttime + '-' + shop_info[i].endtime;
                    }
                }
                this.shopInfo =  shop_info_;
            }
        },
        ready:function(){
            this.show_data_init();
            this.select_shop();
        }
    });


    function checkPhone(phone){
        if(!(/^1[34578]\d{9}$/.test(phone))){
            alert("手机号码有误，请重填");
            return false;
        }
        return true;
    }


    /**
     *下单操作
     */
    function do_order(){
        var data = {};
        var url = '../index/index.php?m=Home&c=Order&a=addOrder_two';
        var subscribe_time = $('#subscribe_time').val();
        data.phone = $('#phone').val();
        data.uname = $('#uname').val();
        data.fault_type = type;
        data.subscribe_time =subscribe_time;
        data.area_id = $('#area_id').val();
        data.address_info = $('#address_info').val();
        data.message = $('#message').val();
        data.code = $('#code').val();

        //到店维修
        if(type==2){
            url = '../index/index.php?m=Home&c=Order&a=addOrder_shop_two';
            data.admin_id = $('#admin_id').val();
            if(!data.admin_id){
                alert('请选择店铺');
                return false;
            }
        }

        data.order_id = order_id;
        if(is_phone==data.phone){
            data.code = 0;
        }

        if(!checkPhone(data.phone)){
            return false;
        }


        if(type==1){
            if(!subscribe_time){
                alert('请输入预约时间');
                return false;
            }

            if(!data.address_info){
                alert('请输入详细地址');
                return false;
            }
        }



        $.post(url ,data ,function(res){
            if(res.code==200){
                alert('订单提交成功');
                location.href = "my_order.html?201161107";
            }else{
                alert(res.message);
            }
        },'json');
    }

    (function($) {
        $.init();
//        var result = $('#result')[0];
        var btns = $('.date');
        btns.each(function(i, btn) {
            btn.addEventListener('tap', function() {
                var optionsJson = this.getAttribute('data-options') || '{}';
                optionsJson = {"value":"2016-10-29 10:00","beginYear":2016,"endYear":2017,"beginMonth":10,"beginDay":29,"beginHour":9};
                var options = optionsJson;
                var now=new Date();
                var dd = new Date();
                dd.setDate(dd.getDate()+7);//获取AddDayCount天后的日期
                options.beginYear=now.getFullYear();
                options.beginMonth=now.getMonth()+1;
                if(now.getHours()==23){
                    options.beginDay=now.getDate()+1;
                    options.beginHours=0;
                }else{
                    options.beginDay=now.getDate();
                    options.beginHours=now.getHours()+1;
                }
                options.endDay =dd.getDate();
                options.endMonth = dd.getMonth()+1;
                options.beginMinutes = 0;
                options.endHours = 23;
                var id = this.getAttribute('id');
                /*
                 * 首次显示时实例化组件
                 * 示例为了简洁，将 options 放在了按钮的 dom 上
                 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
                 */
                var picker = new $.DtPicker(options);
                picker.show(function(rs) {
                    /*
                     * rs.value 拼合后的 value
                     * rs.text 拼合后的 text
                     * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
                     * rs.m 月，用法同年
                     * rs.d 日，用法同年
                     * rs.h 时，用法同年
                     * rs.i 分（minutes 的第二个字母），用法同年
                     */
//                    result.innerText = '选择结果: ' + rs.text;
                    console.dir(rs);

                    var stringTime = rs.text;

                    btns[0].value = rs.text;
                    /*
                     * 返回 false 可以阻止选择框的关闭
                     * return false;
                     */
                    /*
                     * 释放组件资源，释放后将将不能再操作组件
                     * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
                     * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
                     * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
                     */
                    picker.dispose();
                });
            }, false);
        });
    })(mui);


    $('#select').find('span').click(function(){
        var index =  $(this).attr('name');
        type = index;
        var demo1  = $('#type-1');
        var demo1_1 = $('#type-1-1');
        var demo2 = $('#type-2');
        $('#select').find('span').removeClass('active');
        $(this).addClass('active');
        if(index==1){
            demo1.show();
            demo1_1.show();
            demo2.hide();
        }else if(index==2){
            demo2.show();
            demo1.hide();
            demo1_1.hide();
        }
    });

//    function totiemparese(stringTime){
//        var timestamp2 = Date.parse(new Date(stringTime))/1000;
//        return timestamp2;
//    }
</script>
</html>